<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">

  <title>Tabs &amp; Accordions | Remark Admin Template</title>

  <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
  <link rel="shortcut icon" href="../assets/images/favicon.ico">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
  <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

  <!-- Skin tools (demo site only) -->
  <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
  <script src="../assets/js/sections/skintools.min.js"></script>

  <!-- Plugins -->
  <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">

  <!-- Fonts -->
  <link rel="stylesheet" href="../../global/fonts/web-icons/web-icons.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>


  <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

  <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

  <!-- Scripts -->
  <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
  <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
  <script>
    Breakpoints();
  </script>
</head>
<body>
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
      data-toggle="menubar">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
      data-toggle="collapse">
        <i class="icon wb-more-horizontal" aria-hidden="true"></i>
      </button>
      <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
        <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
        <span class="navbar-brand-text hidden-xs"> Remark</span>
      </div>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
      data-toggle="collapse">
        <span class="sr-only">Toggle Search</span>
        <i class="icon wb-search" aria-hidden="true"></i>
      </button>
    </div>

    <div class="navbar-container container-fluid">
      <!-- Navbar Collapse -->
      <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
        <!-- Navbar Toolbar -->
        <ul class="nav navbar-toolbar">
          <li class="hidden-float" id="toggleMenubar">
            <a data-toggle="menubar" href="#" role="button">
              <i class="icon hamburger hamburger-arrow-left">
                  <span class="sr-only">Toggle menubar</span>
                  <span class="hamburger-bar"></span>
                </i>
            </a>
          </li>
          <li class="hidden-xs" id="toggleFullscreen">
            <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
              <span class="sr-only">Toggle fullscreen</span>
            </a>
          </li>
          <li class="hidden-float">
            <a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
            role="button">
              <span class="sr-only">Toggle Search</span>
            </a>
          </li>
          <li class="dropdown dropdown-fw dropdown-mega">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="fade" role="button">Mega <i class="icon wb-chevron-down-mini" aria-hidden="true"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <div class="mega-content">
                  <div class="row">
                    <div class="col-sm-4">
                      <h5>UI Kit</h5>
                      <ul class="blocks-2">
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/animation.html">Animation</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="buttons.html">Buttons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="colors.html">Colors</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="dropdowns.html">Dropdowns</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="icons.html">Icons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/lightbox.html">Lightbox</a>
                            </li>
                          </ul>
                        </li>
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="modals.html">Modals</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="panel-structure.html">Panels</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../structure/overlay.html">Overlay</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="tooltip-popover.html ">Tooltips</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/scrollable.html">Scrollable</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="typography.html">Typography</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5>Media
                        <span class="badge badge-success">4</span>
                      </h5>
                      <ul class="blocks-3">
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5 class="margin-bottom-0">Accordion</h5>
                      <!-- Accordion -->
                      <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                      role="tablist">
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                            <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                            aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                          role="tabpanel">
                            <div class="panel-body">
                              De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                              congressus ostendit alienae, voluptati ornateque
                              accusamus clamat reperietur convicia albucius.
                            </div>
                          </div>
                        </div>
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                          role="tabpanel">
                            <div class="panel-body">
                              Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                              loco ignavi, credo videretur multoque choro fatemur
                              mortis animus adoptionem, bello statuat expediunt
                              naturales.
                            </div>
                          </div>
                        </div>

                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                          role="tabpanel">
                            <div class="panel-body">
                              Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                              suscipere. Desiderat magnum, contenta poena desiderant
                              concederetur menandri damna disputandum corporum.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Accordion -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- End Navbar Toolbar -->

        <!-- Navbar Toolbar Right -->
        <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
            aria-expanded="false" role="button">
              <span class="flag-icon flag-icon-us"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-gb"></span> English</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-fr"></span> French</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-cn"></span> Chinese</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-de"></span> German</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-nl"></span> Dutch</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
              </li>
              <li class="divider" role="presentation"></li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-bell" aria-hidden="true"></i>
              <span class="badge badge-danger up">5</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>NOTIFICATIONS</h5>
                <span class="label label-round label-danger">New 5</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">A new order has been placed</h6>
                          <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Completed the task</h6>
                          <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Settings updated</h6>
                          <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Event started</h6>
                          <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Message received</h6>
                          <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    All notifications
                  </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-envelope" aria-hidden="true"></i>
              <span class="badge badge-info up">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>MESSAGES</h5>
                <span class="label label-round label-info">New 3</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Mary Adams</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                          </div>
                          <div class="media-detail">Anyways, i would like just do it</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Caleb Richards</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                          </div>
                          <div class="media-detail">I checheck the document. But there seems</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">June Lane</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                          </div>
                          <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Edward Fletcher</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                          </div>
                          <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    See all messages
                  </a>
              </li>
            </ul>
          </li>
          <li id="toggleChat">
            <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
              <i class="icon wb-chat" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- End Navbar Toolbar Right -->
      </div>
      <!-- End Navbar Collapse -->

      <!-- Site Navbar Seach -->
      <div class="collapse navbar-search-overlap" id="site-navbar-search">
        <form role="search">
          <div class="form-group">
            <div class="input-search">
              <i class="input-search-icon wb-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="site-search" placeholder="Search...">
              <button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search"
              data-toggle="collapse" aria-label="Close"></button>
            </div>
          </div>
        </form>
      </div>
      <!-- End Site Navbar Seach -->
    </div>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body">
      <div>
        <div>
          <ul class="site-menu">
            <li class="site-menu-category">General</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-dashboard" aria-hidden="true"></i>
                <span class="site-menu-title">Dashboard</span>
                <div class="site-menu-badge">
                  <span class="badge badge-success">3</span>
                </div>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../index.html">
                    <span class="site-menu-title">Dashboard v1</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/v2.html">
                    <span class="site-menu-title">Dashboard v2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/ecommerce.html">
                    <span class="site-menu-title">Ecommerce</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/analytics.html">
                    <span class="site-menu-title">Analytics</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/team.html">
                    <span class="site-menu-title">Team</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-layout" aria-hidden="true"></i>
                <span class="site-menu-title">Layouts</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed.html">
                    <span class="site-menu-title">Menu Collapsed</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed-alt.html">
                    <span class="site-menu-title">Menu Collapsed Alt</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-expended.html">
                    <span class="site-menu-title">Menu Expended</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/grids.html">
                    <span class="site-menu-title">Grid Scaffolding</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/layout-grid.html">
                    <span class="site-menu-title">Layout Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/headers.html">
                    <span class="site-menu-title">Different Headers</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/panel-transition.html">
                    <span class="site-menu-title">Panel Transition</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/boxed.html">
                    <span class="site-menu-title">Boxed Layout</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/two-columns.html">
                    <span class="site-menu-title">Two Columns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-flipped.html">
                    <span class="site-menu-title">Menubar Flipped</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                    <span class="site-menu-title">Menubar Native Scrolling</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/bordered-header.html">
                    <span class="site-menu-title">Bordered Header</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                    <span class="site-menu-title">Page Aside Fixed</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-file" aria-hidden="true"></i>
                <span class="site-menu-title">Pages</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Errors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-400.html">
                        <span class="site-menu-title">400</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-403.html">
                        <span class="site-menu-title">403</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-404.html">
                        <span class="site-menu-title">404</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-500.html">
                        <span class="site-menu-title">500</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-503.html">
                        <span class="site-menu-title">503</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/faq.html">
                    <span class="site-menu-title">FAQ</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery.html">
                    <span class="site-menu-title">Gallery</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery-grid.html">
                    <span class="site-menu-title">Gallery Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/search-result.html">
                    <span class="site-menu-title">Search Result</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Maps</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-google.html">
                        <span class="site-menu-title">Google Maps</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-vector.html">
                        <span class="site-menu-title">Vector Maps</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/maintenance.html">
                    <span class="site-menu-title">Maintenance</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/forgot-password.html">
                    <span class="site-menu-title">Forgot Password</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/lockscreen.html">
                    <span class="site-menu-title">Lockscreen</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login.html">
                    <span class="site-menu-title">Login</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register.html">
                    <span class="site-menu-title">Register</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v2.html">
                    <span class="site-menu-title">Login V2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v2.html">
                    <span class="site-menu-title">Register V2</span>
                    <div class="site-menu-label">
                      <span class="label label-info label-round">new</span>
                    </div>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v3.html">
                    <span class="site-menu-title">Login V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v3.html">
                    <span class="site-menu-title">Register V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/user.html">
                    <span class="site-menu-title">User List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/invoice.html">
                    <span class="site-menu-title">Invoice</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/blank.html">
                    <span class="site-menu-title">Blank Page</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/email.html">
                    <span class="site-menu-title">Email</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/code-editor.html">
                    <span class="site-menu-title">Code Editor</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/profile.html">
                    <span class="site-menu-title">Profile</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/site-map.html">
                    <span class="site-menu-title">Sitemap</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Elements</li>
            <li class="site-menu-item has-sub active open">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-bookmark" aria-hidden="true"></i>
                <span class="site-menu-title">Basic UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Panel</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-structure.html">
                        <span class="site-menu-title">Panel Structure</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-actions.html">
                        <span class="site-menu-title">Panel Actions</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-portlets.html">
                        <span class="site-menu-title">Panel Portlets</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="buttons.html">
                    <span class="site-menu-title">Buttons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="dropdowns.html">
                    <span class="site-menu-title">Dropdowns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="icons.html">
                    <span class="site-menu-title">Icons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="list.html">
                    <span class="site-menu-title">List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tooltip-popover.html">
                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="modals.html">
                    <span class="site-menu-title">Modals</span>
                  </a>
                </li>
                <li class="site-menu-item active">
                  <a class="animsition-link" href="tabs-accordions.html">
                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="images.html">
                    <span class="site-menu-title">Images</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="badges-labels.html">
                    <span class="site-menu-title">Badges &amp; Labels</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="progress-bars.html">
                    <span class="site-menu-title">Progress Bars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="carousel.html">
                    <span class="site-menu-title">Carousel</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="typography.html">
                    <span class="site-menu-title">Typography</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="colors.html">
                    <span class="site-menu-title">Colors</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="utilities.html">
                    <span class="site-menu-title">Utilties</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-hammer" aria-hidden="true"></i>
                <span class="site-menu-title">Advanced UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item hidden-xs site-tour-trigger">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Tour</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/animation.html">
                    <span class="site-menu-title">Animation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/highlight.html">
                    <span class="site-menu-title">Highlight</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/lightbox.html">
                    <span class="site-menu-title">Lightbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/scrollable.html">
                    <span class="site-menu-title">Scrollable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/rating.html">
                    <span class="site-menu-title">Rating</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/context-menu.html">
                    <span class="site-menu-title">Context Menu</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/alertify.html">
                    <span class="site-menu-title">Alertify</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/masonry.html">
                    <span class="site-menu-title">Masonry</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/treeview.html">
                    <span class="site-menu-title">Treeview</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/toastr.html">
                    <span class="site-menu-title">Toastr</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-vector.html">
                    <span class="site-menu-title">Vector Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-google.html">
                    <span class="site-menu-title">Google Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/sortable-nestable.html">
                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-plugin" aria-hidden="true"></i>
                <span class="site-menu-title">Structure</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/alerts.html">
                    <span class="site-menu-title">Alerts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/ribbon.html">
                    <span class="site-menu-title">Ribbon</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pricing-tables.html">
                    <span class="site-menu-title">Pricing Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/overlay.html">
                    <span class="site-menu-title">Overlay</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/cover.html">
                    <span class="site-menu-title">Cover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline-simple.html">
                    <span class="site-menu-title">Simple Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline.html">
                    <span class="site-menu-title">Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/step.html">
                    <span class="site-menu-title">Step</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/comments.html">
                    <span class="site-menu-title">Comments</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/media.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/chat.html">
                    <span class="site-menu-title">Chat</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/testimonials.html">
                    <span class="site-menu-title">Testimonials</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/nav.html">
                    <span class="site-menu-title">Nav</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/navbars.html">
                    <span class="site-menu-title">Navbars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/blockquotes.html">
                    <span class="site-menu-title">Blockquotes</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pagination.html">
                    <span class="site-menu-title">Pagination</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/breadcrumbs.html">
                    <span class="site-menu-title">Breadcrumbs</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-extension" aria-hidden="true"></i>
                <span class="site-menu-title">Widgets</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/statistics.html">
                    <span class="site-menu-title">Statistics Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/data.html">
                    <span class="site-menu-title">Data Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/blog.html">
                    <span class="site-menu-title">Blog Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/chart.html">
                    <span class="site-menu-title">Chart Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/social.html">
                    <span class="site-menu-title">Social Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/weather.html">
                    <span class="site-menu-title">Weather Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-library" aria-hidden="true"></i>
                <span class="site-menu-title">Forms</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/general.html">
                    <span class="site-menu-title">General Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/material.html">
                    <span class="site-menu-title">Material Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/advanced.html">
                    <span class="site-menu-title">Advanced Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/layouts.html">
                    <span class="site-menu-title">Form Layouts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/wizard.html">
                    <span class="site-menu-title">Form Wizard</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/validation.html">
                    <span class="site-menu-title">Form Validation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/masks.html">
                    <span class="site-menu-title">Form Masks</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/editable.html">
                    <span class="site-menu-title">Form Editable</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Editors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-summernote.html">
                        <span class="site-menu-title">Summernote</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-markdown.html">
                        <span class="site-menu-title">Markdown</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-ace.html">
                        <span class="site-menu-title">Ace Editor</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/image-cropping.html">
                    <span class="site-menu-title">Image Cropping</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/file-uploads.html">
                    <span class="site-menu-title">File Uploads</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-table" aria-hidden="true"></i>
                <span class="site-menu-title">Tables</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/basic.html">
                    <span class="site-menu-title">Basic Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/bootstrap.html">
                    <span class="site-menu-title">Bootstrap Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/floatthead.html">
                    <span class="site-menu-title">floatThead</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/responsive.html">
                    <span class="site-menu-title">Responsive Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/editable.html">
                    <span class="site-menu-title">Editable Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/jsgrid.html">
                    <span class="site-menu-title">jsGrid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/footable.html">
                    <span class="site-menu-title">FooTable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/datatable.html">
                    <span class="site-menu-title">DataTables</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-pie-chart" aria-hidden="true"></i>
                <span class="site-menu-title">Chart</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartjs.html">
                    <span class="site-menu-title">Chart.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/gauges.html">
                    <span class="site-menu-title">Gauges</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/flot.html">
                    <span class="site-menu-title">Flot</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/peity.html">
                    <span class="site-menu-title">Peity</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/sparkline.html">
                    <span class="site-menu-title">Sparkline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/morris.html">
                    <span class="site-menu-title">Morris</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartist.html">
                    <span class="site-menu-title">Chartist.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/rickshaw.html">
                    <span class="site-menu-title">Rickshaw</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/pie-progress.html">
                    <span class="site-menu-title">Pie Progress</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/c3.html">
                    <span class="site-menu-title">C3</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Apps</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-grid-4" aria-hidden="true"></i>
                <span class="site-menu-title">Apps</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/contacts/contacts.html">
                    <span class="site-menu-title">Contacts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/calendar/calendar.html">
                    <span class="site-menu-title">Calendar</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/notebook/notebook.html">
                    <span class="site-menu-title">Notebook</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                    <span class="site-menu-title">Taskboard</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Documents</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/articles.html">
                        <span class="site-menu-title">Articles</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/categories.html">
                        <span class="site-menu-title">Categories</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/article.html">
                        <span class="site-menu-title">Article</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/forum/forum.html">
                    <span class="site-menu-title">Forum</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/message/message.html">
                    <span class="site-menu-title">Message</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/projects/projects.html">
                    <span class="site-menu-title">Projects</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                    <span class="site-menu-title">Mailbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/media/overview.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/work/work.html">
                    <span class="site-menu-title">Work</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/location/location.html">
                    <span class="site-menu-title">Location</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Angular UI</li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../angular/index.html">
                <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                <span class="site-menu-title">Angular UI</span>
                <div class="site-menu-label">
                  <span class="label label-danger label-round">new</span>
                </div>
              </a>
            </li>
          </ul>

          <div class="site-menubar-section">
            <h5>
              Milestone
              <span class="pull-right">30%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
            </div>
            <h5>
              Release
              <span class="pull-right">60%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-menubar-footer">
      <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
      data-original-title="Settings">
        <span class="icon wb-settings" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
        <span class="icon wb-eye-close" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
        <span class="icon wb-power" aria-hidden="true"></span>
      </a>
    </div>
  </div>
  <div class="site-gridmenu">
    <div>
      <div>
        <ul>
          <li>
            <a href="../apps/mailbox/mailbox.html">
              <i class="icon wb-envelope"></i>
              <span>Mailbox</span>
            </a>
          </li>
          <li>
            <a href="../apps/calendar/calendar.html">
              <i class="icon wb-calendar"></i>
              <span>Calendar</span>
            </a>
          </li>
          <li>
            <a href="../apps/contacts/contacts.html">
              <i class="icon wb-user"></i>
              <span>Contacts</span>
            </a>
          </li>
          <li>
            <a href="../apps/media/overview.html">
              <i class="icon wb-camera"></i>
              <span>Media</span>
            </a>
          </li>
          <li>
            <a href="../apps/documents/categories.html">
              <i class="icon wb-order"></i>
              <span>Documents</span>
            </a>
          </li>
          <li>
            <a href="../apps/projects/projects.html">
              <i class="icon wb-image"></i>
              <span>Project</span>
            </a>
          </li>
          <li>
            <a href="../apps/forum/forum.html">
              <i class="icon wb-chat-group"></i>
              <span>Forum</span>
            </a>
          </li>
          <li>
            <a href="../index.html">
              <i class="icon wb-dashboard"></i>
              <span>Dashboard</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- Page -->
  <div class="page animsition">
    <div class="page-header">
      <ol class="breadcrumb">
        <li><a href="../index.html">Home</a></li>
        <li class="active">Basic UI</li>
      </ol>
      <h1 class="page-title">Tabs &amp; Accordions</h1>
      <div class="page-header-actions">
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Edit">
          <i class="icon wb-pencil" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Refresh">
          <i class="icon wb-refresh" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Setting">
          <i class="icon wb-settings" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="page-content container-fluid">
      <!-- Panel Tabs -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Tabs</h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Tabs -->
              <div class="example-wrap">
                <div class="nav-tabs-horizontal">
                  <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsOne" aria-controls="exampleTabsOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsTwo" aria-controls="exampleTabsTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsThree" aria-controls="exampleTabsThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsFour" aria-controls="exampleTabsFour"
                      role="tab">Javascript</a></li>
                    <li class="dropdown" role="presentation">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <span class="caret"></span>Menu </a>
                      <ul class="dropdown-menu" role="menu">
                        <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsOne" aria-controls="exampleTabsOne"
                          role="tab">Home</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsTwo" aria-controls="exampleTabsTwo"
                          role="tab">Components</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsThree" aria-controls="exampleTabsThree"
                          role="tab">Css</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsFour" aria-controls="exampleTabsFour"
                          role="tab">Javascript</a></li>
                      </ul>
                    </li>
                  </ul>
                  <div class="tab-content padding-top-20">
                    <div class="tab-pane active" id="exampleTabsOne" role="tabpanel">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neglegentur sabinum instructus
                      fingitur accusantibus harum neque consuetudine intereant
                      numeris, ipse tuemur suum apud mediocrem iactant. Libidinibus
                      amatoriis dicta albuci manum, statue.
                    </div>
                    <div class="tab-pane" id="exampleTabsTwo" role="tabpanel">
                      Negant parvos fructu nostram mutans supplicii ac dissentias, maius tibi licebit
                      ruinae philosophia. Salutatus repellere titillaret expetendum
                      ipsi. Cupiditates intellegam exercitumque privatio concederetur,
                      sempiternum, verbis malint dissensio nullas noctesque earumque.
                    </div>
                    <div class="tab-pane" id="exampleTabsThree" role="tabpanel">
                      Benivole horrent tantalo fuisset adamare fugiendam tractatos indicaverunt animis
                      chaere, brevi minuendas, ubi angoribus iisque deorsum audita
                      haec dedocendi utilitas. Panaetium erimus platonem varias
                      imperitos animum, iudiciorumque operis multa disputando.
                    </div>
                    <div class="tab-pane" id="exampleTabsFour" role="tabpanel">
                      Metus subtilius texit consilio fugiendam, opinionum levius amici inertissimae pecuniae
                      tribus ordiamur, alienus artes solitudo, minime praesidia
                      proficiscuntur reiciat detracta involuta veterum. Rutilius
                      quis honestatis hominum, quisquis percussit sibi explicari.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs -->
            </div>

            <div class="col-lg-6">
              <!-- Example Tabs Reverse -->
              <div class="example-wrap">
                <div class="nav-tabs-horizontal">
                  <ul class="nav nav-tabs nav-tabs-reverse" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsReverseOne" aria-controls="exampleTabsReverseOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseTwo" aria-controls="exampleTabsReverseTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseThree" aria-controls="exampleTabsReverseThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseFour" aria-controls="exampleTabsReverseFour"
                      role="tab">Javascript</a></li>
                    <li class="dropdown" role="presentation">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <span class="caret"></span>Dropdown </a>
                      <ul class="dropdown-menu" role="menu">
                        <li class="active" role="presentation"><a data-toggle="tab" href="exampleTabsReverseOne" aria-controls="exampleTabsReverseOne"
                          role="tab">Home</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseTwo" aria-controls="exampleTabsReverseTwo"
                          role="tab">Components</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseThree" aria-controls="exampleTabsReverseThree"
                          role="tab">Css</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseFour" aria-controls="exampleTabsReverseFour"
                          role="tab">Javascript</a></li>
                      </ul>
                    </li>
                  </ul>
                  <div class="tab-content padding-top-20">
                    <div class="tab-pane active" id="exampleTabsReverseOne" role="tabpanel">
                      Imperii discedere optio meminerit cumanum sis, delectu, probantur homine iactare
                      fortasse, explicatis possumus discere sumitur istis verterunt
                      dolor, procedat difficilem odio augeri ipsi. Tantopere urbanitas
                      levamur magnam timeam impediri oblivione.
                    </div>
                    <div class="tab-pane" id="exampleTabsReverseTwo" role="tabpanel">
                      Habet qua, omnia mundus sequi pondere horrida ponendam, multavit neglexerit dissentientium
                      consuetudinum seditione fecit pecuniae temeritas interesset,
                      censes accessio fortibus dicturam tenebo respirare laudantium
                      nostros constituamus, incidant fictae incorrupte. Bonorum.
                    </div>
                    <div class="tab-pane" id="exampleTabsReverseThree" role="tabpanel">
                      Defensa spe cura exorsus difficile maiorum amicorum ergo. Sequi ignavi degendae
                      labefactetur attulit fingitur, nullas, aetatis hinc maximeque.
                      Protervi nivem negarent rationis alia delapsa p finiri. Doloris.
                      Dici sentire inmensae.
                    </div>
                    <div class="tab-pane" id="exampleTabsReverseFour" role="tabpanel">
                      Plena quidque diuturnitatem, perpessio quam detrimenti. Poetis, multi sole putemus
                      prorsus, deorsum recusandae. De veniat animi. Deterritum
                      eorumque sibi constituant legatis. Tranquilli intellegebat
                      dissentientium contereret dissentientium. Explicatis tibique
                      sane fecisse.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Reverse -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Tabs Left -->
              <div class="example-wrap">
                <div class="nav-tabs-vertical">
                  <ul class="nav nav-tabs margin-right-25" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLeftOne" aria-controls="exampleTabsLeftOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLeftTwo" aria-controls="exampleTabsLeftTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLeftThree" aria-controls="exampleTabsLeftThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLeftFour" aria-controls="exampleTabsLeftFour"
                      role="tab">Javascript</a></li>
                  </ul>
                  <div class="tab-content padding-vertical-15">
                    <div class="tab-pane active" id="exampleTabsLeftOne" role="tabpanel">
                      Puto loqueretur maxime tuentur statuam quanta quamquam multoque cogitavisse, romano
                      continens repellat omnis liquidae, inveneris aegritudine
                      inesse dirigentur graece secundum ipso unam, cognitionis
                      isdem mortem tantis opibus turma virtus legum, procedat accusantium
                      ipse sine fuissent desideraturam. Naturalem virtutum familiari
                      nasci tenebo provident convincere. Senserit ultima faciam
                      deterius plurimum ornateque curiosi. Oratione sit, dices
                      malunt quibusdam. Distinguique parendum contentam graecam
                      sale.
                    </div>
                    <div class="tab-pane" id="exampleTabsLeftTwo" role="tabpanel">
                      Quaerat delectus arte exhorrescere summum disputando agatur perfunctio, e videntur
                      repellere errorem opinor facete invidi perspici simul liberos,
                      inhumanus. Fingitur iudico simulent polyaeno conclusionemque
                      atomis placatae solido etiam, optinere defenditur libero
                      consequentis aristoteli scribentur curis iudicium divinum.
                      Nostros pertineant, concederetur moveat laborum caeco secutus
                      rectas. Dignitatis tranquillitate negant utilior, approbantibus
                      polyaeno malint ullo vide. Possum sane confidam cogitavisse.
                      Sumitur. Diis.
                    </div>
                    <div class="tab-pane" id="exampleTabsLeftThree" role="tabpanel">
                      Chrysippe rebus institutionem utrisque dixisset manus quippiam ignorare defatigatio
                      doctiores, essent doctus ipsam tamquam complexiones corporisque,
                      ars umbram sentiri venandi. Ipsam. Reprehenderit tantum debent
                      sicine assumenda comprobavit, assumenda primos fuerit atomos
                      amicorum inducitur quaedam miserum, potitur numquid effluere
                      haeret ipsos consuetudine, munere putet fugiendis orationis
                      quantumcumque. Perferendis attento saluti liberatione contra,
                      constituam efficeret quaeso accusamus quieti petat rem nisi
                      amicum.
                    </div>
                    <div class="tab-pane" id="exampleTabsLeftFour" role="tabpanel">
                      Laudabilis. At artes audiebamus firmam discordiae potione albam ferantur, epicureum
                      loquerer videretur formidinum utrisque simulent postremo,
                      praesidia variari fecerit ferantur. Hominibus doctissimos
                      multi, ferentur, certissimam medicorum bonum iucundius depravare
                      facile. Degendae istius perfunctio quisquis ordinem ornatum,
                      praeda atomi degendae animus. Mens eximiae placuit terrore,
                      sollicitant efficeret audeam tantalo, vulgo laudantium evertitur
                      spe meminerunt timentis populo, senserit inprobitas facilius
                      referri consiliisque.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Left -->
            </div>

            <div class="col-lg-6">
              <!-- Example Tabs Right -->
              <div class="example-wrap">
                <div class="nav-tabs-vertical">
                  <ul class="nav nav-tabs nav-tabs-reverse margin-left-25" data-plugin="nav-tabs"
                  role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsRightOne" aria-controls="exampleTabsRightOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsRightTwo" aria-controls="exampleTabsRightTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsRightThree" aria-controls="exampleTabsRightThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsRightFour" aria-controls="exampleTabsRightFour"
                      role="tab">Javascript</a></li>
                  </ul>
                  <div class="tab-content padding-vertical-15">
                    <div class="tab-pane active" id="exampleTabsRightOne" role="tabpanel">
                      Amputata tollit potiora iniuria falli scilicet dissentiet, adversarium consule
                      patiatur iracundia incurrunt latina fit locos movere mererer,
                      deterret quaeritur metuque suum nimium rebus perfunctio.
                      Physici malunt, fuit videntur facillimis remotis corrigere
                      cumque bonum moveat expetitur infimum, corrumpit solam usu
                      eoque, futuris insitam irridente nescius leguntur carere
                      corporis quoddam, maledicta audivi eveniet inquam deterret
                      suspicio exhorrescere despicationes victi. Veterum auctori
                      sapienter.
                    </div>
                    <div class="tab-pane" id="exampleTabsRightTwo" role="tabpanel">
                      Instituit nobis perspicuum sollicitant intellegi noris dicitis latine difficile
                      viderer, perpessio reddidisti sanguinem nulli. Scipio, huic
                      quaeritur persequeretur modis lictores patria dubio derepta
                      verterunt, scriptorem sint certae convenire modo indignae,
                      attulit exercitationem ignavi, expectamus, officia aristoteli
                      nunc. Per clamat firmitatem ornatum. Beatae ingeniis amputata
                      claudicare conversam latine, industria reprehenderit complectitur
                      inciderit utilior, paratus prosperum ullus argumentandum
                      latinas terroribus chrysippo, pertineant.
                    </div>
                    <div class="tab-pane" id="exampleTabsRightThree" role="tabpanel">
                      Mox clarorum disciplinam andriam derigatur secunda, timeret, parum p iucundum talem
                      sequitur, inprobis debilitati pariter sinit facere motu percipit
                      maledici opus. Gessisse quibusdam dubitat didicisset pellat
                      mente conferebamus natura, dubium tu huic. Malis mortis etsi
                      puto ante, adversantur hausta inciderint, logikh ordiamur
                      contentiones illi acute suum conformavit, iucunditas iis
                      leviora muniti exercitationem partus quibus video idcirco
                      familias, domo docet beate.
                    </div>
                    <div class="tab-pane" id="exampleTabsRightFour" role="tabpanel">
                      Quales, legendus consecutionem utrisque dominorum minime indignae exquirere bonae
                      esset vim, graece distrahi scribimus perpaulum pariter parta
                      aliquod, doloris conducunt sensum suam. Adest succumbere
                      appetendum andriam nascuntur. Scripserit deleniti honoris
                      philosophorum exaudita omnem alias. Potuimus. Medeam doceat
                      capti necessariae effugiendorum formidines contineri bono
                      fabulas incorruptis, nullo neglexerit quietae erigimur illis
                      insitam simulent quaerendum, perciperet, dicemus omnino ius
                      hanc, impetum reprehendunt.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Right -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Tabs Icon -->
              <div class="example-wrap">
                <div class="nav-tabs-horizontal">
                  <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsIconOne" aria-controls="exampleTabsIconOne"
                      role="tab"><i class="icon wb-home margin-0" aria-hidden="true"></i></a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconTwo" aria-controls="exampleTabsIconTwo"
                      role="tab"><i class="icon wb-settings margin-0" aria-hidden="true"></i></a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconThree" aria-controls="exampleTabsIconThree"
                      role="tab"><i class="icon wb-star margin-0" aria-hidden="true"></i></a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconFour" aria-controls="exampleTabsIconFour"
                      role="tab"><i class="icon wb-cloud margin-0" aria-hidden="true"></i></a></li>
                  </ul>
                  <div class="tab-content padding-top-15">
                    <div class="tab-pane active" id="exampleTabsIconOne" role="tabpanel">
                      Fruenda stabilique contumeliae erga inpendente nostros morbi, fugiendus modo cumanum,
                      possit sicut orestem iucunde appetere expetendum platonem,
                      manu nisi orestem discordiae. Aliud efficiat putat accusantium
                      acuti e didicisse cernantur optimum.
                    </div>
                    <div class="tab-pane" id="exampleTabsIconTwo" role="tabpanel">
                      Iucunde restincto corrupti locos sane totam contrariis, putas quaerimus, aequo
                      grate dissentiet disseruerunt epicureum, modo adipisci contemnentes
                      legam istius maximam, virtute torquentur multam, habemus
                      integris morbos tradunt suppetet animis detracta.
                    </div>
                    <div class="tab-pane" id="exampleTabsIconThree" role="tabpanel">
                      Quarum eloquentiam, aperta. Hominibus adipiscuntur. Firme graecis doloris liberabuntur
                      sensum recteque declarant. Aiunt, fore tranquillae dicitis
                      necessariae, chorusque periculis libenter constituamus aspernandum
                      ait chaere, cogitemus, quisquis omnia genuit has hae.
                    </div>
                    <div class="tab-pane" id="exampleTabsIconFour" role="tabpanel">
                      Excepturi causae, cepisse meliore quanta consectetur aliqua attulit aperiri. Dissentiet
                      sicine civibus, l, certissimam animos amet consequatur amicos
                      si. Albam. Amicitias depravata istis depravatum quas reliqui
                      iactant convincere alios euripidis.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Icon -->
            </div>

            <div class="col-lg-6">
              <!-- Example Tabs Icon Left -->
              <div class="example-wrap">
                <div class="nav-tabs-vertical">
                  <ul class="nav nav-tabs margin-right-25" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftOne" aria-controls="exampleTabsIconLeftOne"
                      role="tab"><i class="icon wb-home margin-0" aria-hidden="true"></i></a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftTwo" aria-controls="exampleTabsIconLeftTwo"
                      role="tab"><i class="icon wb-settings margin-0" aria-hidden="true"></i></a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftThree" aria-controls="exampleTabsIconLeftThree"
                      role="tab"><i class="icon wb-star margin-0" aria-hidden="true"></i></a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftFour" aria-controls="exampleTabsIconLeftFour"
                      role="tab"><i class="icon wb-cloud margin-0" aria-hidden="true"></i></a></li>
                  </ul>
                  <div class="tab-content padding-vertical-15">
                    <div class="tab-pane active" id="exampleTabsIconLeftOne" role="tabpanel">
                      Disseruerunt aiebat veterum universas politus corrigere pacto disputata, sabinum
                      officia, status latinas monet optari quid animi arbitratu,
                      inveniri caritatem adhibuit, putamus, electis parabilis nutu
                      unam claris magna locum disputatum, tenuit gymnasia scripserit
                      praetereat exedunt cyrenaicos reformidans. Aliquem, profecto
                      has perpetiuntur industriae liberalitati, prorsus bona, ullus
                      faciendumve ennii. Dein aperiam romanum conspectum complectitur
                      mala, fonte late quorum, commenticiam initiis incidant.
                    </div>
                    <div class="tab-pane" id="exampleTabsIconLeftTwo" role="tabpanel">
                      Utrumvis angore, laudatur eligendi damna tanta ultimum quidque. Data philosophis
                      efficitur. Etsi apte deorsum tradidisse. Excepturi sublatum
                      viros rerum alias ii peccant, ferre facillimis, iucundum
                      veniam natus quaeritur incursione vestrae comit ignaviamque,
                      tria fructuosam acutum secunda perveniri levis posteri vendibiliora
                      nullam. Probes cui appetendi causas, attico familiari rem
                      tempus cn torquatum. Officia expetendis et stultus pervenias
                      stabilique arbitrium, numeranda.
                    </div>
                    <div class="tab-pane" id="exampleTabsIconLeftThree" role="tabpanel">
                      Similique corporisque. Vitam erga videmus. Comparandae fecit. Arbitrarer cives
                      redeamus dein corpus poetae laborum intellegamus tibique,
                      numen acute congressus soluta acutus tradere deserunt confidet
                      iudicium, angusta, voluit discordans umquam arbitrantur,
                      amatoriis quem inportuno distinguique. Istae, referri. Intellegimus
                      dare hac facerem summam quo peccant maluisset earum, mel
                      graeca constituamus provident amicitiae. Mollitia plane,
                      doleamus defuturum ab plerique intellegimus erigimur fictae.
                    </div>
                    <div class="tab-pane" id="exampleTabsIconLeftFour" role="tabpanel">
                      Consulatu sequimur persecuti quietus aristippi propter afflueret, quibusdam congressus
                      neglegentur delectu optimus exeduntur aliquod interesset.
                      Quaeque postea ceterorum incurreret copulatas quos. Minuit
                      dicunt torquatum illum libero perfecto illustribus, eximiae
                      quidam quales praesentium turpis illustribus utinam assidua,
                      eaque dicenda, faciunt iudicari fore sint percipiatur vivere
                      vexetur, cuiquam num alios malle vitiis gravissimo nulla,
                      natus lucilius possim indignius. Fortibus ait, accuratius.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Icon Left -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Tabs Solid -->
              <div class="example-wrap">
                <div class="nav-tabs-horizontal">
                  <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsSolidOne" aria-controls="exampleTabsSolidOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidTwo" aria-controls="exampleTabsSolidTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidThree" aria-controls="exampleTabsSolidThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidFour" aria-controls="exampleTabsSolidFour"
                      role="tab">Javascript</a></li>
                    <li class="dropdown" role="presentation">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <span class="caret"></span>Dropdown </a>
                      <ul class="dropdown-menu" role="menu">
                        <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsSolidOne" aria-controls="exampleTabsSolidOne"
                          role="tab">Home</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidTwo" aria-controls="exampleTabsSolidTwo"
                          role="tab">Components</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidThree" aria-controls="exampleTabsSolidThree"
                          role="tab">Css</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidFour" aria-controls="exampleTabsSolidFour"
                          role="tab">Javascript</a></li>
                      </ul>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div class="tab-pane active" id="exampleTabsSolidOne" role="tabpanel">
                      Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                      video sola divina amputata aliquos amputata, quanti minime
                      quisquis astris depravare. Consecutus tranquilli ille meminit
                      obruamus quas. Triari verbis, aliquos ignavi.
                    </div>
                    <div class="tab-pane" id="exampleTabsSolidTwo" role="tabpanel">
                      Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                      errata hominum emolumento officii explicabo appellantur,
                      suscipiet inciderit spatio, quantumcumque disciplinae maluisti
                      putarent cogitemus. Voluerint adipiscendarum aristotele invidi
                      fructuosam.
                    </div>
                    <div class="tab-pane" id="exampleTabsSolidThree" role="tabpanel">
                      Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                      sicut qualisque, atomus versatur alienae, brute pulcherrimum
                      dividendo miserius utinam directam, omnium laborum. Statue
                      litteras uberiora nescio tribuat, contereret vituperandae,
                      magnam.
                    </div>
                    <div class="tab-pane" id="exampleTabsSolidFour" role="tabpanel">
                      Praeterita conveniunt corrumpit divinum vis exercendi labitur. Feci adquiescere
                      eruditi inquam segniorem tantalo. Appetendi volumus nati,
                      suspicio, maximisque otiosum iudicabit tantalo, requirere,
                      affectus firmissimum pariter instructior laetamur o fautrices
                      imperitos.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Solid -->
            </div>

            <div class="col-lg-6">
              <!-- Example Tabs Solid Left -->
              <div class="example-wrap">
                <div class="nav-tabs-vertical">
                  <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftOne" aria-controls="exampleTabsSolidLeftOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftTwo" aria-controls="exampleTabsSolidLeftTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftThree" aria-controls="exampleTabsSolidLeftThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftFour" aria-controls="exampleTabsSolidLeftFour"
                      role="tab">Javascript</a></li>
                  </ul>
                  <div class="tab-content">
                    <div class="tab-pane active" id="exampleTabsSolidLeftOne" role="tabpanel">
                      Velit studuisse terentii scientiam pondere intus relinqueret andriam, natum natum
                      mutat gravis cotidieque discenda minima esset vi gravissimis.
                      Offendimur acutum poetae vacuitate intellegaturque primisque
                      atilii probarent, pars plena omittendis.
                    </div>
                    <div class="tab-pane" id="exampleTabsSolidLeftTwo" role="tabpanel">
                      Assiduitas ordinem infinito, ut artis incidunt quanto debilitati patria fungimur
                      protervi, euripidis andriam intellegimus ecce esset consumeret,
                      multi quietus fastidii prima maximeque corrumpit, afferrent,
                      ducimus epicuro multavit maledici dolere.
                    </div>
                    <div class="tab-pane" id="exampleTabsSolidLeftThree" role="tabpanel">
                      Peccandi sinit defendere bono sermo vocent, maius, suppetet plurimum eos scribi
                      aetatis captet nosmet cognitionis dolere o. Percipit interpretaris
                      illud variari censes, gaudemus. Nostris, arguerent vitium
                      timentis arguerent contumeliae.
                    </div>
                    <div class="tab-pane" id="exampleTabsSolidLeftFour" role="tabpanel">
                      Conversa oblivione vocent antiopam omnem quodsi superstitio centurionum, possumus
                      iactare denique quieti deorsum ullo posse, ista obruamus
                      omnisque alios diligant concessum, faciendumve sine causam
                      moribus occultarum via octavio interpretum.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Solid Left -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Tabs Line -->
              <div class="example-wrap margin-lg-0">
                <div class="nav-tabs-horizontal">
                  <ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLineOne" aria-controls="exampleTabsLineOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineTwo" aria-controls="exampleTabsLineTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineThree" aria-controls="exampleTabsLineThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineFour" aria-controls="exampleTabsLineFour"
                      role="tab">Javascript</a></li>
                    <li class="dropdown" role="presentation">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <span class="caret"></span>Dropdown </a>
                      <ul class="dropdown-menu" role="menu">
                        <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLineOne" aria-controls="exampleTabsLineOne"
                          role="tab">Home</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineTwo" aria-controls="exampleTabsLineTwo"
                          role="tab">Components</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineThree" aria-controls="exampleTabsLineThree"
                          role="tab">Css</a></li>
                        <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineFour" aria-controls="exampleTabsLineFour"
                          role="tab">Javascript</a></li>
                      </ul>
                    </li>
                  </ul>
                  <div class="tab-content padding-top-20">
                    <div class="tab-pane active" id="exampleTabsLineOne" role="tabpanel">
                      Quoquo timeret omne redeamus ratione monet nosque requietis afferrent iste, pertinerent.
                      Postremo frustra oportet pueriliter finxerat eos offendit
                      fecerint, iudicem quieti scribi animumque pondere ancillae,
                      timeret stoicos iustitia parvam.
                    </div>
                    <div class="tab-pane" id="exampleTabsLineTwo" role="tabpanel">
                      Sole, latinas incurreret optari vivatur, porro delectu epicurus cadere impedit
                      fit ferreum concludaturque varias, omnium gloriosis vivendo
                      via filio contentam expeteretur fonte expectata, quosque
                      praetor quid iucunditatis fortitudinem esse.
                    </div>
                    <div class="tab-pane" id="exampleTabsLineThree" role="tabpanel">
                      Maestitiam quamquam iudicare veterum contineri ipse cognoscerem se omittantur dialectica,
                      dixit poterit nondum tempora corpora claudicare ratione percipitur.
                      Earum comprehenderit laudem platonis allevatio graeci, invidus
                      coercendi valetudinis numen deseruisse.
                    </div>
                    <div class="tab-pane" id="exampleTabsLineFour" role="tabpanel">
                      Adiit optime intemperantiam ostendis doctus brevi provincia suscepi. Eos efficitur
                      inprobis negent turbulenta consentientis ingeniis natura,
                      desperantes quisque concessum theophrasti, torquatus detracto,
                      deinde, intellegentium fruitur errorem nulli vivatur, operis.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Line -->
            </div>

            <div class="col-lg-6">
              <!-- Example Tabs Line Left -->
              <div class="example-wrap">
                <div class="nav-tabs-vertical">
                  <ul class="nav nav-tabs nav-tabs-line margin-right-25" data-plugin="nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftOne" aria-controls="exampleTabsLineLeftOne"
                      role="tab">Home</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftTwo" aria-controls="exampleTabsLineLeftTwo"
                      role="tab">Components</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftThree" aria-controls="exampleTabsLineLeftThree"
                      role="tab">Css</a></li>
                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftFour" aria-controls="exampleTabsLineLeftFour"
                      role="tab">Javascript</a></li>
                  </ul>
                  <div class="tab-content padding-vertical-15">
                    <div class="tab-pane active" id="exampleTabsLineLeftOne" role="tabpanel">
                      Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                      venandi cotidie euripidis vexetur, scribendi recta fortunam
                      hanc oblivione. Iniuria ipso statuam utrumque asperiores
                      eae cogitemus, evertitur triarium perspexit conclusionemque
                      propterea repellendus agatur scilicet, leniter intervalla
                      nocet praeterierunt tuum privatione, senserit sale vias,
                      delectatum dedecora ratione o religionis derigatur diuturnum
                      arbitrantur conspiratione, legam opera splendore iste democritum
                      apte romanum legum egregios.
                    </div>
                    <div class="tab-pane" id="exampleTabsLineLeftTwo" role="tabpanel">
                      Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                      abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                      invidiae ferre constituto gaudeat contentam, omnium nescius,
                      consistat interesse animi, amet fuisset numen graecos incidunt
                      euripidis praesens, homines religionis dirigentur postulant.
                      Magnum utrumvis gravitate appareat fabulae facio perveniri
                      fruenda indicaverunt texit, frequenter probet diligenter
                      sententia meam distinctio theseo legerint corporis quoquo,
                      optari futurove expedita.
                    </div>
                    <div class="tab-pane" id="exampleTabsLineLeftThree" role="tabpanel">
                      Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                      Delectatum copulatas solemus tenere legam ignaviamque diis
                      peccant ornamenta videro, adquiescere bonorum quisquam ceramico
                      minime quodsi corporisque. Nostri pauca gravioribus reici
                      solvantur, angoribus naturalem sed epicurei occultum sola
                      institutionem meminerunt quem fonte, confirmat. Cui eodem
                      perspecta vim solis innumerabiles, videatur status qui quanto
                      sapientiam nomini honestum, comit sumitur nati via.
                    </div>
                    <div class="tab-pane" id="exampleTabsLineLeftFour" role="tabpanel">
                      Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                      disseretur voluptates crudeli sustulisti. Hostis res utuntur
                      bono incurrunt navigandi laboribus istae tali, miserum metuamus
                      labor quasi synephebos iudicante. Effecerit sicine falsarum
                      pugnantibus imperitos, vero successionem exhorrescere illis
                      magnopere deteriora maioribus necessariam industria. Illi
                      variari stabilique augendas suscipiet, corrigere conducunt,
                      divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                      desideret aliena sinat utrumque.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Tabs Line Left -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Tabs -->

      <!-- Tabs In Panel -->
      <h4>Tabs With Inverse</h4>
      <div class="row">
        <div class="col-lg-6">
          <!-- Example Tabs Inverse -->
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse">
              <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsInverseOne" aria-controls="exampleTabsInverseOne"
                  role="tab">
                  The first tab
                </a>
                </li>
                <li role="presentation">
                  <a data-toggle="tab" href="#exampleTabsInverseTwo" aria-controls="exampleTabsInverseTwo"
                  role="tab">
                  The second tab
                </a>
                </li>
              </ul>
              <div class="tab-content padding-20">
                <div class="tab-pane active" id="exampleTabsInverseOne" role="tabpanel">
                  Amicorum doloribus splendido iniuste odio andriam suas andriam scripta posidonium,
                  poetis adolescens incorrupte disserunt eruditionem astris verbis
                  cuius malle quantum, quibusdam iudico perfunctio re, audire menandri
                  quantus occultarum studiis.
                </div>
                <div class="tab-pane" id="exampleTabsInverseTwo" role="tabpanel">
                  Insequitur invidi an sumitur accedere epicurum divina claudicare quiddam, praebeat
                  corporis generis errata tempora latinas possent arare soliditatem
                  desiderare, poterit. Incorrupte, tantas nivem solum frustra saxum
                  tantis litteras accusata.
                </div>
              </div>
            </div>
          </div>
          <!-- End Example Tabs Inverse -->
        </div>

        <div class="col-lg-6">
          <!-- Example Tabs Left Inverse -->
          <div class="example-wrap">
            <div class="nav-tabs-vertical nav-tabs-inverse">
              <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsLeftInverseOne" aria-controls="exampleTabsLeftInverseOne"
                  role="tab">
                    <i class="icon wb-home margin-0" aria-hidden="true"></i>
                  </a>
                </li>
                <li role="presentation">
                  <a data-toggle="tab" href="#exampleTabsLeftInverseTwo" aria-controls="exampleTabsLeftInverseTwo"
                  role="tab">
                    <i class="icon wb-settings margin-0" aria-hidden="true"></i>
                  </a>
                </li>
                <li role="presentation">
                  <a data-toggle="tab" href="#exampleTabsLeftInverseThree" aria-controls="exampleTabsLeftInverseThree"
                  role="tab">
                    <i class="icon wb-star margin-0" aria-hidden="true"></i>
                  </a>
                </li>
              </ul>
              <div class="tab-content padding-20">
                <div class="tab-pane active" id="exampleTabsLeftInverseOne" role="tabpanel">
                  Ipse honeste propter provincia iudex, eorum perinde brevi macedonum, conferebamus
                  mirari stoicis, centurionum stabilitas sponte. Emancipaverat
                  liberavisse possumus quibusdam disseruerunt percipi non nusquam
                  administrari. Istius cupiditate vestrae addidisti ferri explicatis,
                  senserit dicemus divitiarum. Mel habeat iudicandum ecce. Oratio
                  probarentur reliquisti metu ullo peccant, acutus debeo recta
                  suapte iucunda postulet audita morte, occultum noctesque appellant
                  progrediens viros torquatum potitur intervalla.
                </div>
                <div class="tab-pane" id="exampleTabsLeftInverseTwo" role="tabpanel">
                  Conspiratione, egregios summam gessisse videro amice qui captet, fecit, legendos
                  probo ponderum vult detractio solitudo facete gymnasia defendit
                  triarius. Reliquarum cognitionem noris, regione filium delectu
                  efficiat probaretur, civium vitam beateque eriguntur concursio
                  sapientia seditione misisti allevatio ego. Deorum principes.
                  Delicatissimi inmensae partes facere sentire frequenter pars
                  dedecora gloriatur, pars sapientium cursu possit imperiis homo
                  patrius repellere haec hortensio. Solvantur.
                </div>
                <div class="tab-pane" id="exampleTabsLeftInverseThree" role="tabpanel">
                  Virtutibus effectrices patet splendore confectum assiduitas operam, politus oderis.
                  Cernimus, vexetur approbantibus ne inimicus putavisset magnam
                  finitas. Gloriatur, reperiuntur vim historiae tenuit, cadere,
                  quaerendum albucius tranquilli in interesset praesidia ignoratione
                  ait adiuvet fructuosam, veniam facilis erit optinere aiunt epicuro
                  dissentiunt afferat, molestum quando minimum noster desiderat
                  antiopam igitur indoctum. Audaces antiquitate discedere aequum
                  conflixisse familiarem aliquid, notissima laudandis adiungimus.
                </div>
              </div>
            </div>
          </div>
          <!-- End Example Tabs Left Inverse -->
        </div>

        <div class="clearfix visible-lg-block"></div>

        <div class="col-lg-6">
          <!-- Example Tabs Solid Inverse -->
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsSolidInverseOne" aria-controls="exampleTabsSolidInverseOne"
                  role="tab">
                  The first tab
                </a>
                </li>
                <li role="presentation">
                  <a data-toggle="tab" href="#exampleTabsSolidInverseTwo" aria-controls="exampleTabsSolidInverseTwo"
                  role="tab">
                  The second tab
                </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="exampleTabsSolidInverseOne" role="tabpanel">
                  Medium. Disciplina imitarentur orestem refert, quanta stabilem exedunt defuturum
                  discedere poenis iustius primum omnis blanditiis, declinabunt
                  lineam, suscipiet umquam damna respondendum quorum, easque iis
                  videretur finis,blanditiis verentur.
                </div>
                <div class="tab-pane" id="exampleTabsSolidInverseTwo" role="tabpanel">
                  Arbitror nulli fugiat liberos mi aequum epularum praetulerit. Facerem hausta intellegere
                  caret eximiae etiamsi veserim disciplinis iustitia, expetendum
                  credo gloriatur perpetiuntur, fugiendus pleniorem fruentem, necesse
                  pararetur. Et, horreat optimum.
                </div>
              </div>
            </div>
          </div>
          <!-- End Example Tabs Solid Inverse -->
        </div>

        <div class="col-lg-6">
          <!-- Example Tabs Solid Left Inverse -->
          <div class="example-wrap">
            <div class="nav-tabs-vertical nav-tabs-inverse">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsSolidLeftInverseOne" aria-controls="exampleTabsSolidLeftInverseOne"
                  role="tab">
                    <i class="icon wb-home margin-0" aria-hidden="true"></i>
                  </a>
                </li>
                <li role="presentation">
                  <a data-toggle="tab" href="#exampleTabsSolidLeftInverseTwo" aria-controls="exampleTabsSolidLeftInverseTwo"
                  role="tab">
                    <i class="icon wb-settings margin-0" aria-hidden="true"></i>
                  </a>
                </li>
                <li role="presentation">
                  <a data-toggle="tab" href="#exampleTabsSolidLeftInverseThree" aria-controls="exampleTabsSolidLeftInverseThree"
                  role="tab">
                    <i class="icon wb-star margin-0" aria-hidden="true"></i>
                  </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="exampleTabsSolidLeftInverseOne" role="tabpanel">
                  Ullus exercendi posidonium fugiendam erat incorruptis rationis. Amet amicis individua
                  ruant, epicurus nomini patriam investigandi. Greges gloriae aetatis.
                  Importari. Maiora incurreret, eius inimicus summo. Inprobitatem
                  scipio, vias assumenda amicitias doloris gloriosis fructu, emolumento
                  fecerint deserere rebus natura, desideret, gratiam aristippi
                  fructuosam facultas multitudinem pronuntiaret quales timeam fit,
                  totus incommoda plurimum amarissimam aetatis cognitioque, grate,
                  eam turpe censet nescio.
                </div>
                <div class="tab-pane" id="exampleTabsSolidLeftInverseTwo" role="tabpanel">
                  Praesidia honestatis. Sitisque disseruerunt desperantes feramus duce quorum conficiuntque
                  insolens, errata dignissimos beatam audiam turpius confidere
                  quale. Brevi quid poterimus aristippus miserius intervalla intereant
                  fautrices. Etiamsi amorem fastidii notae incursione transferam,
                  consequantur transferre molestum reprehensa maledici labefactetur
                  dicebas hoc legum aliam, occulte iisque epularum iste modus disserendum
                  recteque cui, epicuri ennius dignitatis iudicatum beatus aristoteli
                  beata fruitur, postulant.
                </div>
                <div class="tab-pane" id="exampleTabsSolidLeftInverseThree" role="tabpanel">
                  Homine appellant ruant medicorum honestatis, disputationi saluti facerem neglexerit
                  versuum intellegimus, habet vide eos, quando legendos quadam
                  dolores consequi admonere vacuitate quaedam, afficitur postea
                  cognitio omittam sanguinem aequitate iustius deteriora, error
                  rutilius inbecilloque ancillae zenonem conversam omnem, cogitavisse
                  interrogari integris atque e, tota tantis repetitis nos disciplina
                  plus sitisque, intuemur, extremo deteriora. Involuta diligant
                  aequi causa plerique praesertim.
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Example Tabs Solid Left Inverse -->
      </div>
      <!-- End Tabs With Inverse -->

      <div class="row">
        <div class="col-sm-6">
          <!-- Example Iconified Tabs -->
          <div class="example-wrap">
            <h4 class="example-title">Iconified Tabs</h4>
            <div class="example">
              <div class="nav-tabs-horizontal nav-tabs-inverse">
                <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                  <li class="active" role="presentation">
                    <a data-toggle="tab" href="#exampleIconifiedTabsOne" aria-controls="exampleIconifiedTabsOne"
                    role="tab">
                      <i class="icon wb-user" aria-hidden="true"></i> User
                    </a>
                  </li>
                  <li role="presentation">
                    <a data-toggle="tab" href="#exampleIconifiedTabsTwo" aria-controls="exampleIconifiedTabsTwo"
                    role="tab">
                      <i class="icon wb-plugin" aria-hidden="true"></i> Plugin
                    </a>
                  </li>
                  <li role="presentation">
                    <a data-toggle="tab" href="#exampleIconifiedTabsThree" aria-controls="exampleIconifiedTabsThree"
                    role="tab">
                      <i class="icon wb-settings" aria-hidden="true"></i> Settings
                    </a>
                  </li>
                </ul>
                <div class="tab-content padding-top-15">
                  <div class="tab-pane active" id="exampleIconifiedTabsOne" role="tabpanel">Magna ex labore ex officia. Ullamco ex labore dolore et labore
                    reprehenderit. Cillum est consectetur pariatur ullamco duis
                    id. Sint commodo do esse veniam. In anim exercitation veniam
                    cillum non pariatur ex cupidatat excepteur. Nisi magna mollit
                    exercitation sit eiusmod laboris dolore ipsum. Nisi laborum
                    magna minim anim ut consectetur nisi in nisi.</div>
                  <div class="tab-pane" id="exampleIconifiedTabsTwo" role="tabpanel">Ipsum Lorem minim quis exercitation ut exercitation. Cillum et
                    labore proident esse elit eiusmod occaecat et voluptate. Amet
                    sunt anim non enim eu cupidatat laborum. Reprehenderit in Lorem
                    aute dolor pariatur. Et excepteur anim esse elit incididunt
                    sint culpa sint. Pariatur amet dolor ad pariatur. Id elit cillum
                    labore adipisicing non.</div>
                  <div class="tab-pane" id="exampleIconifiedTabsThree" role="tabpanel">Quis nisi eiusmod eiusmod veniam. Ut dolor fugiat ipsum consequat
                    labore. Voluptate tempor magna proident ea do laboris. Do reprehenderit
                    do aliqua dolore. Sunt adipisicing laborum non nostrud consequat
                    quis in eiusmod. Sunt magna quis quis aute commodo labore id
                    sint ut. Veniam esse dolor ad do.</div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Example Iconified Tabs -->
        </div>

        <div class="col-sm-6">
          <!-- Example Closeable Tabs -->
          <div class="example-wrap">
            <h4 class="example-title">Closeable Tabs</h4>
            <div class="example">
              <div class="nav-tabs-horizontal nav-tabs-inverse">
                <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                  <li class="active" role="presentation">
                    <a data-toggle="tab" href="#exampleCloseableTabsOne" aria-controls="exampleCloseableTabsOne"
                    role="tab">
                    User
                  </a>
                  </li>
                  <li role="presentation">
                    <a data-toggle="tab" href="#exampleCloseableTabsTwo" aria-controls="exampleCloseableTabsTwo"
                    role="tab">
                      <span class="close" data-close="tab" aria-label="Close">
                        <strong title="true">×</strong>
                      </span>
                      Plugin
                    </a>
                  </li>
                  <li role="presentation">
                    <a data-toggle="tab" href="#exampleCloseableTabsThree" aria-controls="exampleCloseableTabsThree"
                    role="tab">
                      <span class="close" data-close="tab" aria-label="Close">
                        <strong title="true">×</strong>
                      </span>
                      Settings
                    </a>
                  </li>
                </ul>
                <div class="tab-content padding-top-15">
                  <div class="tab-pane active" id="exampleCloseableTabsOne" role="tabpanel">Ea elit et elit enim ad nisi. Sint qui sit enim commodo in. Nostrud
                    quis nulla exercitation exercitation adipisicing. Ex deserunt
                    sit incididunt et pariatur labore qui ad. Sint do quis irure
                    proident pariatur. Pariatur amet et incididunt laborum ullamco.
                    Qui veniam excepteur ea sint officia non occaecat.</div>
                  <div class="tab-pane" id="exampleCloseableTabsTwo" role="tabpanel">Cillum dolore mollit duis non mollit nostrud Lorem. Exercitation
                    non id do proident nostrud. Eiusmod quis commodo fugiat ad.
                    Consectetur reprehenderit laborum mollit non nisi ex est mollit.
                    Ullamco ut pariatur sunt et ea et deserunt ad minim. Exercitation
                    quis in nostrud ut ut. Deserunt eu sint enim id eiusmod aliquip
                    pariatur consequat.</div>
                  <div class="tab-pane" id="exampleCloseableTabsThree" role="tabpanel">Mollit deserunt quis nulla do non. Eu pariatur proident laboris
                    id. Ex qui laboris sint eiusmod velit ad. Et aliqua enim amet
                    culpa. Sint sint nostrud sint sunt. Consectetur commodo proident
                    labore nulla laboris officia veniam excepteur non. Elit mollit
                    voluptate aliqua tempor cillum irure ea ut voluptate.</div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Closeable Tabs -->
        </div>
      </div>

      <!-- End Iconified Tabs -->

      <!-- Tab Animation -->
      <h4>Tab Animations</h4>
      <div class="row">
        <div class="col-lg-4 col-md-6">
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideLeftOne" aria-controls="exampleTabsAnimateSlideLeftOne"
                  role="tab" aria-expanded="true">
                  Home
                </a>
                </li>
                <li role="presentation" class="">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideLeftTwo" aria-controls="exampleTabsAnimateSlideLeftTwo"
                  role="tab" aria-expanded="false">
                  Components
                </a>
                </li>
                <li class="" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideLeftThree" aria-controls="exampleTabsAnimateSlideLeftThree"
                  role="tab" aria-expanded="true">
                  Css
                </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active animation-slide-left" id="exampleTabsAnimateSlideLeftOne"
                role="tabpanel">
                  Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                  video sola divina amputata aliquos amputata, quanti minime quisquis
                  astris depravare. Consecutus tranquilli ille meminit obruamus
                  quas. Triari verbis, aliquos ignavi.
                </div>
                <div class="tab-pane animation-slide-left" id="exampleTabsAnimateSlideLeftTwo"
                role="tabpanel">
                  Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                  errata hominum emolumento officii explicabo appellantur, suscipiet
                  inciderit spatio, quantumcumque disciplinae maluisti putarent
                  cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                </div>
                <div class="tab-pane animation-slide-left" id="exampleTabsAnimateSlideLeftThree"
                role="tabpanel">
                  Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                  sicut qualisque, atomus versatur alienae, brute pulcherrimum
                  dividendo miserius utinam directam, omnium laborum. Statue litteras
                  uberiora nescio tribuat, contereret vituperandae, magnam.
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6">
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideRightOne" aria-controls="exampleTabsAnimateSlideRightOne"
                  role="tab" aria-expanded="true">
                  Home
                </a>
                </li>
                <li role="presentation" class="">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideRightTwo" aria-controls="exampleTabsAnimateSlideRightTwo"
                  role="tab" aria-expanded="false">
                  Components
                </a>
                </li>
                <li class="" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideRightThree" aria-controls="exampleTabsAnimateSlideRightThree"
                  role="tab" aria-expanded="true">
                  Css
                </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active animation-slide-right" id="exampleTabsAnimateSlideRightOne"
                role="tabpanel">
                  Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                  video sola divina amputata aliquos amputata, quanti minime quisquis
                  astris depravare. Consecutus tranquilli ille meminit obruamus
                  quas. Triari verbis, aliquos ignavi.
                </div>
                <div class="tab-pane animation-slide-right" id="exampleTabsAnimateSlideRightTwo"
                role="tabpanel">
                  Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                  errata hominum emolumento officii explicabo appellantur, suscipiet
                  inciderit spatio, quantumcumque disciplinae maluisti putarent
                  cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                </div>
                <div class="tab-pane animation-slide-right" id="exampleTabsAnimateSlideRightThree"
                role="tabpanel">
                  Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                  sicut qualisque, atomus versatur alienae, brute pulcherrimum
                  dividendo miserius utinam directam, omnium laborum. Statue litteras
                  uberiora nescio tribuat, contereret vituperandae, magnam.
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6">
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideBottomOne" aria-controls="exampleTabsAnimateSlideBottomOne"
                  role="tab" aria-expanded="true">
                  Home
                </a>
                </li>
                <li role="presentation" class="">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideBottomTwo" aria-controls="exampleTabsAnimateSlideBottomTwo"
                  role="tab" aria-expanded="false">
                  Components
                </a>
                </li>
                <li class="" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideBottomThree" aria-controls="exampleTabsAnimateSlideBottomThree"
                  role="tab" aria-expanded="true">
                  Css
                </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active animation-slide-bottom" id="exampleTabsAnimateSlideBottomOne"
                role="tabpanel">
                  Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                  video sola divina amputata aliquos amputata, quanti minime quisquis
                  astris depravare. Consecutus tranquilli ille meminit obruamus
                  quas. Triari verbis, aliquos ignavi.
                </div>
                <div class="tab-pane animation-slide-bottom" id="exampleTabsAnimateSlideBottomTwo"
                role="tabpanel">
                  Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                  errata hominum emolumento officii explicabo appellantur, suscipiet
                  inciderit spatio, quantumcumque disciplinae maluisti putarent
                  cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                </div>
                <div class="tab-pane animation-slide-bottom" id="exampleTabsAnimateSlideBottomThree"
                role="tabpanel">
                  Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                  sicut qualisque, atomus versatur alienae, brute pulcherrimum
                  dividendo miserius utinam directam, omnium laborum. Statue litteras
                  uberiora nescio tribuat, contereret vituperandae, magnam.
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6">
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideTopOne" aria-controls="exampleTabsAnimateSlideTopOne"
                  role="tab" aria-expanded="true">
                  Home
                </a>
                </li>
                <li role="presentation" class="">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideTopTwo" aria-controls="exampleTabsAnimateSlideTopTwo"
                  role="tab" aria-expanded="false">
                  Components
                </a>
                </li>
                <li class="" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateSlideTopThree" aria-controls="exampleTabsAnimateSlideTopThree"
                  role="tab" aria-expanded="true">
                  Css
                </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active animation-slide-top" id="exampleTabsAnimateSlideTopOne"
                role="tabpanel">
                  Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                  video sola divina amputata aliquos amputata, quanti minime quisquis
                  astris depravare. Consecutus tranquilli ille meminit obruamus
                  quas. Triari verbis, aliquos ignavi.
                </div>
                <div class="tab-pane animation-slide-top" id="exampleTabsAnimateSlideTopTwo" role="tabpanel">
                  Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                  errata hominum emolumento officii explicabo appellantur, suscipiet
                  inciderit spatio, quantumcumque disciplinae maluisti putarent
                  cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                </div>
                <div class="tab-pane animation-slide-top" id="exampleTabsAnimateSlideTopThree"
                role="tabpanel">
                  Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                  sicut qualisque, atomus versatur alienae, brute pulcherrimum
                  dividendo miserius utinam directam, omnium laborum. Statue litteras
                  uberiora nescio tribuat, contereret vituperandae, magnam.
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6">
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateScaleUpOne" aria-controls="exampleTabsAnimateScaleUpOne"
                  role="tab" aria-expanded="true">
                  Home
                </a>
                </li>
                <li role="presentation" class="">
                  <a data-toggle="tab" href="#exampleTabsAnimateScaleUpTwo" aria-controls="exampleTabsAnimateScaleUpTwo"
                  role="tab" aria-expanded="false">
                  Components
                </a>
                </li>
                <li class="" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateScaleupThree" aria-controls="exampleTabsAnimateScaleupThree"
                  role="tab" aria-expanded="true">
                  Css
                </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active animation-scale-up" id="exampleTabsAnimateScaleUpOne"
                role="tabpanel">
                  Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                  video sola divina amputata aliquos amputata, quanti minime quisquis
                  astris depravare. Consecutus tranquilli ille meminit obruamus
                  quas. Triari verbis, aliquos ignavi.
                </div>
                <div class="tab-pane animation-scale-up" id="exampleTabsAnimateScaleUpTwo" role="tabpanel">
                  Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                  errata hominum emolumento officii explicabo appellantur, suscipiet
                  inciderit spatio, quantumcumque disciplinae maluisti putarent
                  cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                </div>
                <div class="tab-pane animation-scale-up" id="exampleTabsAnimateScaleupThree" role="tabpanel">
                  Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                  sicut qualisque, atomus versatur alienae, brute pulcherrimum
                  dividendo miserius utinam directam, omnium laborum. Statue litteras
                  uberiora nescio tribuat, contereret vituperandae, magnam.
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6">
          <div class="example-wrap">
            <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
              <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                <li class="active" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateFadeOne" aria-controls="exampleTabsAnimateFadeOne"
                  role="tab" aria-expanded="true">
                  Home
                </a>
                </li>
                <li role="presentation" class="">
                  <a data-toggle="tab" href="#exampleTabsAnimateFadeTwo" aria-controls="exampleTabsAnimateFadeTwo"
                  role="tab" aria-expanded="false">
                  Components
                </a>
                </li>
                <li class="" role="presentation">
                  <a data-toggle="tab" href="#exampleTabsAnimateFadeThree" aria-controls="exampleTabsAnimateFadeThree"
                  role="tab" aria-expanded="true">
                  Css
                </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active animation-fade" id="exampleTabsAnimateFadeOne" role="tabpanel">
                  Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                  video sola divina amputata aliquos amputata, quanti minime quisquis
                  astris depravare. Consecutus tranquilli ille meminit obruamus
                  quas. Triari verbis, aliquos ignavi.
                </div>
                <div class="tab-pane animation-fade" id="exampleTabsAnimateFadeTwo" role="tabpanel">
                  Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                  errata hominum emolumento officii explicabo appellantur, suscipiet
                  inciderit spatio, quantumcumque disciplinae maluisti putarent
                  cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                </div>
                <div class="tab-pane animation-fade" id="exampleTabsAnimateFadeThree" role="tabpanel">
                  Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                  sicut qualisque, atomus versatur alienae, brute pulcherrimum
                  dividendo miserius utinam directam, omnium laborum. Statue litteras
                  uberiora nescio tribuat, contereret vituperandae, magnam.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Tab Animation -->

      <!-- Panel Collapse -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Collapse</h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Example -->
              <div class="example-wrap margin-lg-0">
                <h4 class="example-title">Example</h4>
                <p>Click the buttons below to show and hide another element via class
                  changes:</p>
                <ul>
                  <li><code>.collapse</code> hides content</li>
                  <li><code>.collapsing</code> is applied during transitions</li>
                  <li><code>.collapse.in</code> shows content</li>
                </ul>
                <p>You can use a link with the <code>href</code> attribute, or a button
                  with the <code>data-target</code> attribute. In both cases, the
                  <code>data-toggle="collapse"</code> is required.</p>
                <div class="example">
                  <div class="example-buttons">
                    <a class="btn btn-primary" data-toggle="collapse" href="#exampleCollapseExample"
                    aria-expanded="false" aria-controls="exampleCollapseExample">
                  Link with href
                  </a>
                    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#exampleCollapseExample"
                    aria-expanded="false" aria-controls="exampleCollapseExample">
                      Button with data-target
                    </button>
                  </div>
                  <div class="collapse" id="exampleCollapseExample">
                    <div class="well">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                      ad squid. Nihil anim keffiyeh helvetica, craft beer labore
                      wes anderson cred nesciunt sapiente ea proident.
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Example -->
            </div>

            <div class="col-lg-6">
              <!-- Example Accordion Example -->
              <div class="example-wrap">
                <h4 class="example-title">Accordion Example</h4>
                <div class="example">
                  <div class="panel-group panel-group-simple margin-bottom-0" id="exampleAccordion"
                  aria-multiselectable="true" role="tablist">
                    <div class="panel">
                      <div class="panel-heading" id="exampleHeadingOne" role="tab">
                        <a class="panel-title" data-parent="#exampleAccordion" data-toggle="collapse" href="#exampleCollapseOne"
                        aria-controls="exampleCollapseOne" aria-expanded="true">
                        Collapsible Group Item #1
                      </a>
                      </div>
                      <div class="panel-collapse collapse in" id="exampleCollapseOne" aria-labelledby="exampleHeadingOne"
                      role="tabpanel">
                        <div class="panel-body">
                          Viros falso ad noctesque, perpetuam probabis molestum labore rerum t alterum indocti
                          persequeretur dignitatis, numquam an quantus inopem,
                          intellegam praetermissum conquirendae intus, amicorum
                          putarent assiduitas sicut suscipiet fructuosam, summis
                          fortitudinem cupiditatum depravata vita volumus. Posteri
                          tantam partes poterimus ea tibi, physici.
                        </div>
                      </div>
                    </div>
                    <div class="panel">
                      <div class="panel-heading" id="exampleHeadingTwo" role="tab">
                        <a class="panel-title collapsed" data-parent="#exampleAccordion" data-toggle="collapse"
                        href="#exampleCollapseTwo" aria-controls="exampleCollapseTwo"
                        aria-expanded="false">
                        Collapsible Group Item #2
                      </a>
                      </div>
                      <div class="panel-collapse collapse" id="exampleCollapseTwo" aria-labelledby="exampleHeadingTwo"
                      role="tabpanel">
                        <div class="panel-body">
                          Legendus albam declinabunt plus omnisque existimant, depulsa libido irridente quoddam
                          eripuit excruciant, sublata amicis corporisque utrum
                          detracto suaviter caritatem libero, causas, odioque sollicitudines
                          sic eruditionem scaevola, magnam gravissimis utramque
                          scriptum defuturum, forensibus, laboribus voluptate maestitiam,
                          haeret inopem optimum satisfacit ii latinam.
                        </div>
                      </div>
                    </div>
                    <div class="panel">
                      <div class="panel-heading" id="exampleHeadingThree" role="tab">
                        <a class="panel-title collapsed" data-parent="#exampleAccordion" data-toggle="collapse"
                        href="#exampleCollapseThree" aria-controls="exampleCollapseThree"
                        aria-expanded="false">
                        Collapsible Group Item #3
                      </a>
                      </div>
                      <div class="panel-collapse collapse" id="exampleCollapseThree" aria-labelledby="exampleHeadingThree"
                      role="tabpanel">
                        <div class="panel-body">
                          Neglegit male hostis temporibus, praesens nullae disputationi directam discordans
                          dedocere. Exquisitaque physici. Spe corpora tibi facerem
                          probet gaudemus diuturnitatem miserius, turbent depravare
                          defendere dum historiae musicis timidiores depulsa, effectrices
                          fruitur dolor aequi dominationis. Perfruique labefactetur
                          invenerit explicavi tradit efficiatur videtis ullam.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Accordion Example -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Collapse -->

      <div>
        <h3>Accordions</h3>
        <div class="row">
          <div class="col-lg-6">
            <!-- Example Default Accordion -->
            <div class="examle-wrap">
              <h4 class="example-title">Default Accordion</h4>
              <div class="example">
                <div class="panel-group" id="exampleAccordionDefault" aria-multiselectable="true"
                role="tablist">
                  <div class="panel">
                    <div class="panel-heading" id="exampleHeadingDefaultOne" role="tab">
                      <a class="panel-title" data-toggle="collapse" href="#exampleCollapseDefaultOne"
                      data-parent="#exampleAccordionDefault" aria-expanded="true"
                      aria-controls="exampleCollapseDefaultOne">
                      Collapsible Group Item #1
                    </a>
                    </div>
                    <div class="panel-collapse collapse in" id="exampleCollapseDefaultOne" aria-labelledby="exampleHeadingDefaultOne"
                    role="tabpanel">
                      <div class="panel-body">
                        De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                        congressus ostendit alienae, voluptati ornateque accusamus
                        clamat reperietur convicia albucius, veniat quocirca vivendi
                        aristotele errorem epicurus. Suppetet. Aeternum animadversionis,
                        turbent cn partem porrecta c putamus diceret decore. Vero
                        itaque incursione.
                      </div>
                    </div>
                  </div>
                  <div class="panel">
                    <div class="panel-heading" id="exampleHeadingDefaultTwo" role="tab">
                      <a class="panel-title collapsed" data-toggle="collapse" href="#exampleCollapseDefaultTwo"
                      data-parent="#exampleAccordionDefault" aria-expanded="false"
                      aria-controls="exampleCollapseDefaultTwo">
                      Collapsible Group Item #2
                    </a>
                    </div>
                    <div class="panel-collapse collapse" id="exampleCollapseDefaultTwo" aria-labelledby="exampleHeadingDefaultTwo"
                    role="tabpanel">
                      <div class="panel-body">
                        Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                        loco ignavi, credo videretur multoque choro fatemur mortis
                        animus adoptionem, bello statuat expediunt naturales frequenter
                        terminari nomine, stabilitas privatio initia paranda contineri
                        abhorreant, percipi dixerit incurreret deorsum imitarentur
                        tenetur antiopam latinam haec.
                      </div>
                    </div>
                  </div>

                  <div class="panel">
                    <div class="panel-heading" id="exampleHeadingDefaultThree" role="tab">
                      <a class="panel-title collapsed" data-toggle="collapse" href="#exampleCollapseDefaultThree"
                      data-parent="#exampleAccordionDefault" aria-expanded="false"
                      aria-controls="exampleCollapseDefaultThree">
                      Collapsible Group Item #3
                    </a>
                    </div>
                    <div class="panel-collapse collapse" id="exampleCollapseDefaultThree" aria-labelledby="exampleHeadingDefaultThree"
                    role="tabpanel">
                      <div class="panel-body">
                        Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                        suscipere. Desiderat magnum, contenta poena desiderant
                        concederetur menandri damna disputandum corporum equidem
                        cyrenaicisque. Defuturum ultimum ista ignaviamque iudicant
                        feci incursione, reprimique fruenda utamur tu faciam complexiones
                        eo, habeo ortum iucundo artes.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Example Default Accordion -->
          </div>

          <div class="col-lg-6">
            <!-- Example Continuous Accordion -->
            <div class="examle-wrap">
              <h4 class="example-title">Continuous Accordion</h4>
              <div class="example">
                <div class="panel-group panel-group-continuous" id="exampleAccordionContinuous"
                aria-multiselectable="true" role="tablist">
                  <div class="panel">
                    <div class="panel-heading" id="exampleHeadingContinuousOne" role="tab">
                      <a class="panel-title" data-parent="#exampleAccordionContinuous" data-toggle="collapse"
                      href="#exampleCollapseContinuousOne" aria-controls="exampleCollapseContinuousOne"
                      aria-expanded="true">
                      Collapsible Group Item #1
                    </a>
                    </div>
                    <div class="panel-collapse collapse in" id="exampleCollapseContinuousOne" aria-labelledby="exampleHeadingContinuousOne"
                    role="tabpanel">
                      <div class="panel-body">
                        Amice cum distinguantur, pronuntiaret omnesque. Sensum opes bonorum rationis propemodum
                        viros elegantis perpetua impetu, sentiunt probo insidiarum
                        telos eruditus, inanium, inprobitatem sero medium necessitatibus,
                        reperiuntur tolerabiles arbitrarer maxime equidem iniucundus
                        ecce sine possunt, primo expedire sumitur infinitio dicturum
                        statuam adhibuit, assumenda.
                      </div>
                    </div>
                  </div>
                  <div class="panel">
                    <div class="panel-heading" id="exampleHeadingContinuousTwo" role="tab">
                      <a class="panel-title collapsed" data-parent="#exampleAccordionContinuous" data-toggle="collapse"
                      href="#exampleCollapseContinuousTwo" aria-controls="exampleCollapseContinuousTwo"
                      aria-expanded="false">
                      Collapsible Group Item #2
                    </a>
                    </div>
                    <div class="panel-collapse collapse" id="exampleCollapseContinuousTwo" aria-labelledby="exampleHeadingContinuousTwo"
                    role="tabpanel">
                      <div class="panel-body">
                        Honoris euripidis, perspici dolemus varias dicat dicantur feramus quisquis desideret
                        solet, diligant aequo iudicem a superstitione secumque
                        ponatur soluta iucunditate, artibus confidam esset quaeri
                        sitisque legendis appareat consequuntur notionem, splendore
                        maius legendis, adolescens nescio perpetua motum adhuc
                        amoris optimus nihil requirere.
                      </div>
                    </div>
                  </div>
                  <div class="panel">
                    <div class="panel-heading" id="exampleHeadingContinuousThree" role="tab">
                      <a class="panel-title collapsed" data-parent="#exampleAccordionContinuous" data-toggle="collapse"
                      href="#exampleCollapseContinuousThree" aria-controls="exampleCollapseContinuousThree"
                      aria-expanded="false">
                      Collapsible Group Item #3
                    </a>
                    </div>
                    <div class="panel-collapse collapse" id="exampleCollapseContinuousThree" aria-labelledby="exampleHeadingContinuousThree"
                    role="tabpanel">
                      <div class="panel-body">
                        Torquatis noster, impensa turma bono, litterae postulet, permanentes nostro derigatur
                        veriusque istam accedere intervalla chremes affert. Ius
                        sententiae legatis atomus quas, ponunt levitatibus timeret.
                        Reque sinit, magnam percipi censet mentitum sis nivem virtutibus
                        seiungi. Bono disserunt nemore. Propter blanditiis laboriosam
                        expeteremus.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Example Continuous Accordion -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Page -->


  <!-- Footer -->
  <footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
      Crafted with <i class="red-600 wb wb-heart"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
  </footer>
  <!-- Core  -->
  <script src="../../global/vendor/jquery/jquery.min.js"></script>
  <script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="../../global/vendor/animsition/animsition.min.js"></script>
  <script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
  <script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
  <script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
  <script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>

  <!-- Plugins -->
  <script src="../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../global/vendor/intro-js/intro.min.js"></script>
  <script src="../../global/vendor/screenfull/screenfull.min.js"></script>
  <script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

  <!-- Plugins For This Page -->
  <script src="../../global/vendor/matchheight/jquery.matchHeight-min.js"></script>

  <!-- Scripts -->
  <script src="../../global/js/core.min.js"></script>
  <script src="../assets/js/site.min.js"></script>

  <script src="../assets/js/sections/menu.min.js"></script>
  <script src="../assets/js/sections/menubar.min.js"></script>
  <script src="../assets/js/sections/gridmenu.min.js"></script>
  <script src="../assets/js/sections/sidebar.min.js"></script>

  <script src="../../global/js/configs/config-colors.min.js"></script>
  <script src="../assets/js/configs/config-tour.min.js"></script>

  <script src="../../global/js/components/asscrollable.min.js"></script>
  <script src="../../global/js/components/animsition.min.js"></script>
  <script src="../../global/js/components/slidepanel.min.js"></script>
  <script src="../../global/js/components/switchery.min.js"></script>

  <script src="../../global/js/plugins/responsive-tabs.min.js"></script>
  <script src="../../global/js/plugins/closeable-tabs.min.js"></script>
  <script src="../../global/js/components/tabs.min.js"></script>


  <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
      });
    })(document, window, jQuery);
  </script>



</body>

</html>